@charset "utf-8";
$font-size: 28px; //定义根字体大小
@function r($px) {
    @return $px/$font-size*1rem;
}
.web {
    width:100%;
    height: 100%;
    header {
        width: 100%;
        height: r(90px);
        position: relative;
        top: 0;
        background: #f7f7f7;
        border-bottom: 1px solid #c1c1c1;
        padding:r(14px) r(20px) r(16px);
        text-align:center;
        i {
            font-size: r(38px);
            color: #848689;
            font-weight: bold;
            line-height: r(60px);
        }
        .navbar {
            display: inline-block;
            .nav-button {
                width: r(202px);
                height: r(60px);
                background: white;
                border: r(1px) solid #d62d31;
                border-radius: r(6px);
                font-size: r(28px);
                color: #d62d31;
                text-align: center;
            }
            .nav-button-right {
                margin-left: r(-18px);
            }
            .active {
                background: #d62d31;
                color: white;
                position: relative;
                z-index: 1;
            }
        }
    }
    //二级导航
    .subnav {
        border-bottom: r(1px) solid #e3e3e3;
        ul {
            li {
                line-height: r(79px);
                font-size: r(26px);
                margin-left:5%;
                a {
                    color: #666666;
                }
            }
            .active-li {
                border-bottom: r(3px) solid #d62d31;
                a {
                    color: #d62d31;
                }
            }
        }
    }
    //主要内容
    section {
        width: 100%;
        position: absolute;
        top: r(171px);
        bottom: 0;
        overflow: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .list {
            .gray-bg {
                width: 100%;
                height: r(22px);
                background-color: #f3f4f6;
                border-bottom: r(1px) solid #e3e3e3;
            }
            .list-top,
            .list-bottom {
                padding: 0 r(20px);
                span {
                    line-height: r(74px);
                    font-size: r(24px);
                }
                .list-top-left,
                .list-bottom-left,
                .list-bottom-middle,
                .list-bottom-right {
                    color: #333333;
                }
                .list-top-left {
                    em {
                        display: inline-block;
                        vertical-align: bottom;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: r(295px);
                    }
                }
                .list-top-right {
                    color: #d62d31;
                }
                .list-bottom-middle {
                    margin-left: r(20px);
                }
                .list-bottom-right>em {
                    color: #d62d31;
                }
            }
            .list-bottom {
                border-bottom: r(1px) solid #e3e3e3;
            }
            .list-middle {
                border-top: r(1px) solid #e3e3e3;
                border-bottom: r(1px) solid #e3e3e3;
                padding: r(24px) r(20px);
                a {
                    display: block;
                }
                .img {
                    width: r(120px);
                    height: r(120px);
                    img {
                        width: 100%;
                    }
                }
                .list-name {
                    color: #333333;
                }
                .list-name,
                span {
                    font-size: r(24px);
                    margin-left: r(25px);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: r(430px);
                }
                span {
                    display: inline-block;
                    margin-top: r(13px);
                    color: #666666;
                }
                .list-middle-right {
                    font-size: r(30px);
                    color: #dadada;
                    position: relative;
                    bottom: r(43px);
                }
            }
        }
    }
}
//媒体查询
@media screen and (min-width:320px){
    html{
        font-size:14px;
    }
}
@media screen and (min-width:360px){
    html{
        font-size:16px;
    }
}
@media screen and (min-width:375px){
    html{
        font-size:16.5px;
    }
}
@media screen and (min-width:414px){
    html{
        font-size:18px;
    }
}